<template>
  <div>
    <div class="search_box">
      <el-input v-model="formData.query" placeholder="专题,地区,类型,上传用户"
                size="large" prefix-icon="el-icon-search" class="search_input">
        <el-button slot="append" @click="search">搜索</el-button>
      </el-input>
      <div class="represent">
        推荐关键词:
        <el-tag size="small" type="warning">斧头湖</el-tag>
        <el-tag size="small" type="warning">2019年鉴</el-tag>
        <el-tag size="small" type="warning">遥感影像</el-tag>
        <el-tag size="small" type="warning">地物分布</el-tag>
        <el-tag size="small" type="warning">水体变迁</el-tag>
        <el-tag size="small" type="warning">汛期水位</el-tag>
      </div>
        <!--&lt;!&ndash;选择行政区域&ndash;&gt;-->
      <!--<div class="district">-->
          <!--<el-cascader-->
            <!--v-model="districts"-->
            <!--:options="districtoptions"-->
            <!--:show-all-levels="false"-->
          <!--&gt;</el-cascader>-->
      <!--</div>-->

        <!--&lt;!&ndash;文件类型选择&ndash;&gt;-->
      <!--<div class="fileType">-->
          <!--<el-cascader-->
            <!--v-model="fileTypes"-->
            <!--:options="fileTypeoptions"-->
          <!--&gt;</el-cascader>-->
      <!--</div>-->

        <!--&lt;!&ndash;选择所属专题&ndash;&gt;-->
      <!--<div class="topic">-->
        <!--<el-cascader-->
          <!--v-model="topics"-->
          <!--:options="topicoptions"-->
        <!--&gt;</el-cascader>-->
      <!--</div>-->

        <!--&lt;!&ndash;检索时间的确定&ndash;&gt;-->
      <!--<div class="time_box" >-->
          <!--<span class="demonstration" ></span>-->
          <!--<el-date-picker-->
            <!--v-model="time"-->
            <!--type="monthrange"-->
            <!--range-separator="至"-->
            <!--start-placeholder="开始月份"-->
            <!--end-placeholder="结束月份">-->
          <!--</el-date-picker>-->
        <!--</div>-->
        <!--检索按钮-->
    </div>

  <!--检索展示-->
    <div class="search_view">
      <!--<el-tag closable>{{districts}}</el-tag>-->
      <!--<el-tag closable>{{fileTypes}}</el-tag>-->
      <!--<el-tag closable>{{topics}}</el-tag>-->

      <el-table
        ref="multipleTable"
        :data="searchResult"
        tooltip-effect="dark"
        style="width: 120%">
        @selection-change="handleSelectionChange"
        <el-table-column type="selection"></el-table-column>
        <!--<el-table-column label="日期" width="120">-->
        <!--<template slot-scope="scope">{{ scope.row.date }}</template>-->
        <!--</el-table-column>-->
        <el-table-column label="文件描述" width="180px">
          <template slot-scope="scope">
          <span v-html="scope.row.fileDescription"></span>
        </template>
        </el-table-column>
        <el-table-column label="文件名称">
          <template slot-scope="scope">
            <span v-html="scope.row.filename"></span>
          </template>
        </el-table-column>
        <el-table-column prop="fileType" label="文件类型"></el-table-column>
        <el-table-column prop="topic" label="专题"></el-table-column>
        <el-table-column label="地区">
          <template slot-scope="scope">
            <span v-html="scope.row.district0"></span>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="操作" class="el-icon-download">
          <template slot-scope="scope">
            <el-button size="small" @click="fileDownloadById(scope.row)">下载</el-button>
            <el-button size="small" @click="fileDownloadByZip(scope.row)">预览</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
      <!--<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>-->
      <el-button size="small" @click="toggleSelection()">取消选择</el-button>
      <el-button size="small" class="filter-item" type="primary" icon="el-icon-download" @click.stop="fileDownloadByZip">下载</el-button>
      </div>
    </div>
  </div>
</template>


<script>
  import {search} from '../Api/api';
  import axios from 'axios'
  // import {downloadById} from "../Api/api";
  // import {downloadByZip} from "../Api/api";

  export default {
    data() {
      return {
        searchResult:[],
        formData: {
          startNum: '1',
          filename: '',
          topic: '',
          district: '',
          fileType: '',
          startTime: '',
          endTime: '',
          query:''
        },
        formLabelWidth: '120px',
        //选择专题
        topics:[],
        topicoptions: [{
          value: '水文数据', label: '水文数据'
        }, {
          value: '水利数据', label: '水利数据'
        }, {
          value: '水质数据', label: '水质数据'
        }, {
          value: '遥感数据', label: '遥感数据'
        }, {
          value: '水工建筑', label: '水工建筑'
        }, {
          value: '水土保持', label: '水土保持'
        }],

        //文件类型选择
        fileTypes:[],
        fileTypeoptions: [{
          value: 'jpg', label: '图片'
        }, {
          value: 'vectorGraphic', label: '矢量数据'
        }, {
          value: 'raster', label: '栅格数据'
        }, {
          value: 'doc', label: '文档'
        }, {
          value: 'excel', label: 'excel表格'
        }, {
          value: 'video', label: '视频'
        }, {
          value: 'other', label: '其他'
        }],

        //地区选择数据
        districts:[],
        districtoptions: [{
          value: '湖北省', label: '湖北省',
          children: [{
            value: '武汉市', label: '武汉市',
            children: [{
              value: '洪山区', label: '洪山区'
            }, {
              value: '汉口', label: '汉口'
            }, {
              value: '汉阳', label: '汉阳'
            }, {
              value: '武昌', label: '武昌'
            }]
          }, {
            value: '襄阳市', label: '襄阳市',
            children: [{
              value: '市区', label: '市区'
            }]
          }]
        }, {
          value: '湖南省', label: '湖南省',
          children: [{
            value: '长沙市', label: '长沙市',
            children: [{
              value: 'layout', label: '布局'
            }, {
              value: 'color', label: '色彩'
            }]
          }, {
            value: '益阳市', label: '益阳市',
            children: [{
              value: '资阳区', label: '资阳区'
            }, {
              value: '赫山区', label: '赫山区'
            }]
          }, {
            value: '常德市', label: '常德市',
            children: [{
              value: '武陵区', label: '武陵区'
            }]
          }]
        }, {
          value: '河南省', label: '河南省',
          children: [{
            value: '郑州', label: '郑州'
          }, {
            value: '洛阳', label: '洛阳'
          }]
        }],

        //日期选择
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        time: ''
      }
    },

    methods: {
      search() {
        let that = this;
        search(that.formData).then(function (res) {
          if (res.status === 200 && res.data.code === 0) {
            that.searchResult = res.data.data;
            that.searchResult = that.searchResult.filter((item, i) =>{
              item.district0 = item.district[0];
              return item;
            })
          }
        })
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      fileDownloadById(row){
        let that = this;

        // let url = 'http://192.168.1.4:9000/download/ById?id='+ row.id;
        let url = 'http://192.168.1.7:9000/download/ById?id='+ row.id;
        const a = document.createElement('a');
        a.style.display = 'none';
        a.download = row.filename;
        a.href = url;
        a.click();
      },
      saveFile(data, name){
        try{
          const blobUrl = window.URL.createObjectURL(data);
          const a = document.createElement('a');
          a.style.display = 'none';
          a.download = name;
          a.href = blobUrl;
          a.click()
        }catch (e) {
          alert('保存文件出错')
        }
      },
      fileDownloadByZip(row){
        // let that = this;
        downloadById(row.id).then(function (res) {
          console.log(res);
          // if (res.status === 200 && res.data.code === 0) {
          //   that.searchResult = res.data.data;
          //   that.searchResult = that.searchResult.filter((item, i) =>{
          //     item.district0 = item.district[0];
          //     return item;
          //   })
          // }
        })
      }
    }
  }
</script>


<style scoped>
  .search_input{
    width: 50%;
    position: relative;
    left: 25%;
    margin-top: 80px;
  }

  .formSearch{
    position: relative;
    right: -820px;
  }
  .district{
    width: 100px;
    margin-left: 440px;
    position: relative;
    top: 30px;
  }
  .fileType{
    width: 100px;
    margin-left: 550px;
    position: relative;
    top: -12px;
  }
  .topic{
    width: 100px;
    margin-left: 660px;
    position: relative;
    top: -52px;
  }
  .time_box{
    position: relative;
    left: 770px;
    top: -92px;
  }

  .search_box{
    /*border: beige;*/
    /*background: beige;*/
    height: 300px;
    width: 1350px;
  }

  .search_view{
    width: 1000px;
    position: relative;
    left: 200px;
  }

  .represent{
    height: 35px;
    margin-left: 350px;
    margin-bottom: 30px;
    margin-top: 20px;
    font-size: 18px;
    color: green;
    width: 800px
  }
</style>
